<template>
  <div style="padding: 10px;box-sizing: border-box;width: 50%" ref="goodsBox">
    <div class="goodsBox">
      <!--      弹出层-->
      <van-popover
          v-model="showPopover"
          trigger="click"
          placement="left-start"
          :actions="actions"
          @select="onSelect">
        <!--      叉号-->
        <template #reference>
          <van-button  size="mini" type="primary"><van-icon color="gray" name="cross"/></van-button>
        </template>
      </van-popover>
      <!--    加载中-->
      <router-link :to="{path:'/goods',query:{goodsId:item.goodsId}}" tag="div">
        <img src='../../assets/dog.gif' alt="" v-if="showLoadFlag">
        <img :src="item.coverImgUrl" alt="" v-else>
        <p class="goodsIntro">{{item.intro}}</p>
        <div class="priceBox">
          <p>
            <span class="￥">￥</span>
            <span class="price">{{ item.price }}</span>
          </p>
        </div>
      </router-link>
    </div>
  </div>

</template>

<script>

export default {
  name: "GoodBlock",
  props:{
    item:Object,
    showLoadFlag:Boolean,
  },
  data(){
    return {
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [
        { text: '不感兴趣', icon: 'close' },
        { text: '看过了', icon: 'eye-o' },
        { text: '已经买了', icon: 'cart-circle-o' }
      ]
    };
  },
  methods:{
    onSelect(){
      // Toast(action.text);
      this.$refs.goodsBox.style.display = 'none'
    },
  }
}
</script>

<style scoped lang="less">

//按钮

.goodsBox{
  border-radius: 15px;
  box-shadow: 2px 2px 3px #dddddd;
  position: relative;
  background-color: #fff;
  border: 1px solid #ddd;
  img{
    display: block;
    margin: 20px auto;
    width: 95%;
  }
  .goodsIntro{
    margin: 10px;
    width: 95%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
  }
  .priceBox{
    margin:10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .￥{
      color: #EC0D0D;
      font-size: 15px;
    }
    .price{
      color: #EC0D0D;
      font-size: 20px;
    }
  }
  .van-popover__wrapper{
    //float: right;
    position: absolute;
    right: 0;
  }
  .van-button--mini{
    border: 0;
    background-color: transparent;
  }
}
</style>